﻿@{
    ViewBag.Title = "Index";
}


<div class="row">
    <div class="col-xs-12">
        <h3 class="header smaller lighter blue">jQuery dataTables</h3>
        <div class="table-header">
            Results for "Latest Registered Domains"
        </div>

        <div class="table-responsive">
            <table id="sample-table-2" class="table table-striped table-bordered table-hover">
            </table>
        </div>
    </div>
</div>

@section inlineScript
{

<script src='@Url.Content("~/Content/ace/js//jquery.dataTables.min.js")'></script>
<script src='@Url.Content("~/Content/ace/js/jquery.dataTables.bootstrap.js")'></script>

<script type="text/javascript">
    //jQuery(function ($) {
    //    $('#sample-table-2').dataTable({
    //        "autoWidth": true,
    //        "bLengthChange": false,
    //        ordering: false,
    //        bProcessing: true,
    //        bStateSave: true,
    //        serverSide: true,
    //        searching: false,
    //        aLengthMenu: [25],
    //        "ajax": {
    //            url: "http://localhost:30837/api/bases/user/list",
    //            "dataSrc": function (json) {
    //                if (json.isSuccess) {
    //                    var newjson = new Array();
    //                    for (var i = 0; i < json.data.items.length; i++) {
    //                        var editstr = "<a href='#'>caozuo</a>";
    //                        newjson.push({
    //                            "account": json.data.items[i].account,
    //                            "name": json.data.items[i].name,
    //                            "state": (json.data.items[i].isEnabled ? "启用" : "禁用"),
    //                            "option": editstr
    //                        });
    //                    }
    //                    return newjson;
    //                } else {
    //                        alert("失败（" + "错误代码：" + json.errorCode + "，错误信息：" + json.message + ")");
    //                }
    //                return [];
    //            },
    //            "data": function (d) {
    //                draw = d.draw;
    //                return $.extend({}, { "sys:sno": "ETL" }, { "sys:act": "GetTaskList" }, { "_t": Date().toString() });
    //            }
    //        },
    //        columns: [
    //            { data: 'name' },
    //            { data: 'dataSource' },
    //            { data: 'state' },
    //            { data: 'option' }

    //        ]
    //    });
    //});
    $(document).ready(function () {
        $("#sample-table-2").dataTable({
            "bLengthChange": false, //改变每页显示数据数量
            "bFilter": false, //过滤功能
            "bProcessing": false, // 是否显示取数据时的那个等待提示
            "bServerSide": true,//这个用来指明是通过服务端来取数据
            "sAjaxSource": "http://localhost:30837/api/bases/user/list",//这个是请求的地址
            "fnServerData": retrieveData, // 获取数据的处理函数
            "aoColumns": [
                { "sTitle": "Engine" },
                { "sTitle": "Browser" },
                {
                    "sTitle": "Grade",
                    "sClass": "center",
                    "fnRender": function(obj) {
                        var sReturn = obj.aData[ obj.iDataColumn ];
                        if ( sReturn == true ) {
                            sReturn = "<b>yes</b>";
                        }
                        return 'no';
                    }
                },
                { "sTitle": "操作" }
            ],
            "aoColumnDefs": [{"bSortable": false, "aTargets": [0, 1, 2, 3]}]
        });
    });

    // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
    function retrieveData(sSource, aoData, fnCallback) {
        $.ajax({
            url: sSource,//这个就是请求地址对应sAjaxSource
            //data: { "aoData": JSON.stringify(aoData111) },//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
            type: 'get',
            dataType: 'json',
            async: false,
            success: function (result) {
                if (result.isSuccess) {
                    //把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                    var rows = new Array();
                    for (var index = 0; index < result.data.items.length; index++) {
                        rows.push([
                            result.data.items[index].account,
                            result.data.items[index].name,
                            result.data.items[index].isEnabled,
                            "<a href='#'>op</a>"
                        ]);
                    }
                    fnCallback({
                        sEcho: aoData[0].value,
                        iTotalRecords: result.data.total,
                        iTotalDisplayRecords: result.data.total,
                        aaData: rows
                    });
                }
            },
            error: function (msg) {
            }
        });
    }
</script>
}